<!--
 * @Author: ChunLai
 * @Date: 2023-08-02 14:11:28
 * @LastEditTime: 2025-09-04 19:16:47
 * @Description: 签字列表模块
 * @FilePath: \02.bldinsure\src\views\sign\components\QianZiSingleListModule.vue
-->
<template>
  <div class="mode3 mt10">
    <div class="sign_ul">
      <div class="sign_item" v-if="tbrSignShow">
        <div class="sign_desc">
          <span class="item_l">
            投保人 <i>{{ applicant.name }}</i> 签名
          </span>
          <span
            class="item_v"
            :class="tbrSignDone ? 'isok' : ''"
            @click="openSignBoard('1')"
          >
            {{ tbrSignDone ? "已签名" : "去签名" }}
            <span class="ms-row-icon size12"></span>
          </span>
        </div>
        <div class="sign_img" v-if="getImgUrl('1')">
          <img :src="getImgUrl('1')" />
        </div>
      </div>
      <div class="sign_item mt10" v-if="bbrSignShow">
        <div class="sign_desc">
          <span class="item_l">
            被保险人 <i>{{ apiBbrMult[0].name }}</i> 签名
          </span>
          <span
            class="item_v"
            :class="bbrSignDone ? 'isok' : ''"
            @click="openSignBoard('2')"
          >
            {{ bbrSignDone ? "已签名" : "去签名" }}
            <span class="ms-row-icon size12"></span>
          </span>
        </div>
        <p class="signtips" v-if="minorWarn">
          当前被保人小于18周岁，由被保人父母/法定监护人签名
        </p>
        <div class="sign_img" v-if="getImgUrl('2')">
          <img :src="getImgUrl('2')" />
        </div>
      </div>
      <div class="sign_item mt10" v-if="dlrSignShow">
        <div class="sign_desc">
          <span class="item_l">
            代理人 <i>{{ agentInfo.name }}</i> 签名
          </span>
          <span
            class="item_v"
            :class="dlrSignDone ? 'isok' : ''"
            @click="openSignBoard('3')"
          >
            {{ dlrSignDone ? "已签名" : "去签名"
            }}<span class="ms-row-icon size12"></span>
          </span>
        </div>
        <div class="sign_img" v-if="getImgUrl('3')">
          <img :src="getImgUrl('3')" />
        </div>
      </div>
    </div>
    <div class="refresh-mode" @click="getStatus">
      <MsImgIcon size="14" name="refresh" class="mr6" /> 刷新查看签名进度
    </div>
    <SignTipMask ref="signPreAct"></SignTipMask>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SignTipMask from "./SignTipMask";
export default {
  name: "QianZiSingleListModule",
  props: ["signStatus"],
  model: {
    prop: "signStatus",
    event: "change",
  },
  data() {
    return {
      flagList: [],
    };
  },
  components: { SignTipMask },
  computed: {
    ...mapGetters({
      apiBbrMult: "insert/apiBbrMult",
      applicant: "insert/applicant",
      agentInfo: "agent/agentInfo",
      minorAge: "page/minorAge",
      tbrPrvinCapital: "insert/tbrPrvinCapital",
      selfInsuredRegions: "dictionary/selfInsuredRegions",
    }),
    shareType() {
      let res = "";
      if (this.$getDataFromUrl("utype")) {
        res = this.$getDataFromUrl("utype");
      }
      return res;
    },
    // 未成年提示信息
    minorWarn() {
      let res = false;
      const bbrAge = this.$GlobalFuns.userAge(this.apiBbrMult[0].birthDate);
      if (bbrAge < this.minorAge) {
        res = true;
      }
      return res;
    },
    tbrSignShow() {
      let res = true;
      if (this.shareType) {
        res = this.shareType === "1";
      }
      return res;
    },
    bbrSignShow() {
      let res = true;
      if (this.shareType) {
        res = this.shareType === "2";
      } else {
        res = this.apiBbrMult[0].relationToAppnt != "4";
      }
      return res;
    },
    dlrSignShow() {
      let res = true;
      if (this.shareType) {
        res = this.shareType === "3";
      }
      // 百年仅有可回溯需要代理人签字
      if (this.compEngName === "bainian") {
        const provns = this.selfInsuredRegions || [];
        res = provns.includes(this.tbrPrvinCapital);
      }
      return res;
    },
    tbrSignDone() {
      let res = false;
      if (this.flagList.length > 0) {
        const obj = this.flagList.find((ele) => ele.key == "tbrSignFlag");
        if (obj && obj.value == "1") {
          res = true;
        }
      }
      return res;
    },
    bbrSignDone() {
      let res = false;
      if (this.flagList.length > 0) {
        const obj = this.flagList.find((ele) => ele.key == "bbrSignFlag");
        if (obj && obj.value == "1") {
          res = true;
        }
      }
      return res;
    },
    dlrSignDone() {
      let res = false;
      if (this.flagList.length > 0) {
        const obj = this.flagList.find((ele) => ele.key == "dlrSignFlag");
        if (obj && obj.value == "1") {
          res = true;
        }
      }
      return res;
    },
    signStatusDone() {
      let res = true;
      if (this.tbrSignShow && !this.tbrSignDone) {
        res = false;
      }
      if (this.bbrSignShow && !this.bbrSignDone) {
        res = false;
      }
      if (this.dlrSignShow && !this.dlrSignDone) {
        res = false;
      }
      return res;
    },
  },
  created() {},
  mounted() {},
  methods: {
    getStatus() {
      this.flagList = [];
      this.$store.commit("updateLoadTxt", "签名文件资源下载中");
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: this.apiComParams,
          apiName: "getOrderFlagList",
          toast: true,
        })
        .then((data) => {
          if (data.list.length > 0) {
            this.flagList = data.list;
            this.$nextTick(() => {
              this.$emit("change", this.signStatusDone);
            });
          }
        });
    },
    openSignBoard(type) {
      // 添加签名完成状态
      let status = false,
        userItem = {};
      if (type == "1") {
        status = this.tbrSignDone;
        userItem = this.applicant;
      } else if (type == "2") {
        status = this.bbrSignDone;
        userItem = this.apiBbrMult[0];
      } else if (type == "3") {
        status = this.dlrSignDone;
        userItem = this.agentInfo;
      }
      this.$refs.signPreAct.initModule(type, userItem, status);
    },
    getImgUrl(type) {
      let res = "";
      let ulabel = "";
      if (this.userType == "1") {
        ulabel = "tbr";
      } else if (this.userType == "2") {
        ulabel = "bbr";
      } else if (this.userType == "3") {
        ulabel = "dlr";
      }
      if (this.flagList.length > 0) {
        const obj = this.flagList.find((ele) => ele.key == `${ulabel}SignFlag`);
        if (obj && obj.imgUrl) {
          res = obj.imgUrl;
        }
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.sign_ul {
  padding: 0 12px;
  .sign_item {
    padding: 0 10px;
    border-radius: 10px;
    background: #ffffff;
    .sign_desc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 400;
      color: #343434;
      padding: 10px 0;
      i {
        color: #ff8d1a;
      }
      .item_v {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #a6a6a6;
        &.isok {
          color: #43cf7c;
        }
      }
    }
    .sign_img {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 68px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #ededed;
        transform: scaleY(0.5);
      }
      img {
        display: block;
        height: 68px;
        object-fit: fill;
      }
    }

    .signtips {
      font-size: 12px;
      color: #ff8d1a;
      padding-bottom: 5px;
    }
  }
}
.module_tt {
  width: 375px;
  height: 40px;
  color: #242424;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding-left: 20px;
  background: #f5f5f9;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: #da251d;
  }
}
</style>
